<template>
  <custom-item :item="customInfo">
    <template #custom_invite>
      <u-text text="邀请人张三" color="#333" size="13"></u-text>
    </template>
  </custom-item>
  <view class="info-box">
    <u-text text="备注" bold size="14" color="#000"></u-text>
    <u-text text="求购大海荔湾别墅，可直接入驻" margin="16rpx 0 0 0" size="14" color="#000"></u-text>
  </view>
  <view class="info-box">
    <view class="u-flex-y-center">
      <u-image src="/static/images/icon_wd.png" width="28rpx" height="32rpx" :fade="false"></u-image>
      <u-text text="客户需求" bold size="14" margin="0 14rpx" color="#000"></u-text>
    </view>
    <u-text :text="`${customInfo.house_type_text}；${customInfo.space}㎡；${customInfo.price}万`" margin="20rpx 0 0 0"
      size="14" color="#333"></u-text>
    <view class="u-flex-y-center u-m-t-30">
      <u-image src="/static/images/icon_wd.png" width="28rpx" height="32rpx" :fade="false"></u-image>
      <u-text text="区域" bold size="14" margin="0 14rpx" color="#000"></u-text>
    </view>
    <u-text v-if="customInfo.xiaoqu" :text="`${customInfo?.xiaoqu?.join(',')}`" margin="20rpx 0 0 0" size="14" color="#333"></u-text>
  </view>
  <view class="info-box">
    <u-text :text="`客户跟进(${customInfo.follow?.length || 0})`" bold size="14" color="#000"></u-text>
    <view class="follow-item u-flex-y-center" v-for="(item,index) in customInfo.follow" :key="item.id">
      <view class="follow-circle u-m-r-20 u-m-b-40"></view>
      <view class="">
        <u-text :text="`${item.content}`" bold size="14" color="#000"></u-text>
        <u-text :text="`${item.createtime_text}  经纪人  ${item.broker_name}`" size="13" margin="16rpx 0 0 0"
          color="#333"></u-text>
      </view>
    </view>
  </view>
  <view class="action-bar u-p-l-80 u-p-r-24 u-flex-y-center u-flex-between">
    <view style="width: 90rpx;" @click="$u.route(`/pages/houseMine/addFollow?id=${customInfo.id}`)">
      <u-icon name="plus-circle" color="#333" customStyle="margin:auto"></u-icon>
      <u-text text="加跟进" align="center" size="26rpx" color="#333"></u-text>
    </view>
    <view class="u-flex-y-center">
      <view class="action-btn">发消息</view>
      <view class="action-btn">致电客户</view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { custom_detail } from '../../config/api';
  import customItem from './components/custom-item.vue';
  import { onShow } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const customInfo = ref({})
  onShow(() => {
    _custom_detail()
  })
  // 客户详情
  const _custom_detail = () => {
    custom_detail({ id: props.id }).then(res => {
      customInfo.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .info-box {
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx;

    .follow-circle {
      width: 16rpx;
      height: 16rpx;
      background: #F87610;
      border-radius: 50%;
    }

    .follow-item {
      background: linear-gradient(89deg, #FFF8F7 0%, #FFE8E5 100%);
      border-radius: 24rpx;
      padding: 20rpx;
      margin-top: 20rpx;
    }
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;

    .action-btn {
      width: 216rpx;
      height: 76rpx;
      border-radius: 38rpx;
      border: 1rpx solid #F87610;
      color: #F87610;
      font-size: 28rpx;
      text-align: center;
      line-height: 76rpx;
    }

    .action-btn+.action-btn {
      color: #fff;
      background: #F87610;
      margin-left: 28rpx;
    }
  }
</style>